import styles from '../index.module.less';
import { tradeListFields } from '@/utils/helper';
import { useEffect, useRef, useState } from 'react';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import FilterSelect from './FilterSelect';
import { countUsdtNumNew, getOrderByUser, getUsdtNum, handleDirection, isSuccess } from '@/utils';
import { tradeListApi, tradeListNewApi } from '@/api';
import dayjs from 'dayjs';

export default function TradeList({ tableWidth }: any) {
  const [list, setList] = useState<any>([]);
  const tableRef: any = useRef('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {}, []);

  // 请求:成交记录
  async function getData(val: any) {
    const params: any = val;
    console.log('params: ', params);
    setLoading(true);
    const res: any = await tradeListNewApi(params);
    console.log('res: 成交记录', res?.data?.list);
    console.log('res: 成交记录', res?.data?.list[1]);
    setLoading(false);
    if (!isSuccess(res)) return { data: [], total: 0 };
    setList(res?.data?.list);
  }

  const columns: ProColumns[] = [
    {
      title: '合约',
      dataIndex: 'contract',
    },
    {
      title: '成交时间',
      dataIndex: 'createTimeNew',
    },
    {
      title: '方向',
      dataIndex: 'newSize',
      render: (text: any, record: any) => (
        <div className={`${text > 0 ? 'color-red' : 'color-green'}`}>
          {text > 0 ? '做多' : '做空'}
        </div>
      ),
    },
    {
      title: '委托ID',
      dataIndex: 'order_id',
    },
    {
      title: '数量(USDT)',
      dataIndex: 'newSize',
      render: (text: any, record: any) => (
        <div>
          {countUsdtNumNew(record?.price, record?.newSize, record?.contractInfo?.quanto_multiplier)}
        </div>
      ),
    },
    {
      title: '成交均价',
      dataIndex: 'price',
    },
    {
      title: '角色',
      dataIndex: 'role',
    },
    {
      title: '手续费',
      dataIndex: 'fee',
      render: (text: any) => <div>{text} USDT</div>,
    },
  ];

  return (
    <>
      <FilterSelect fields={tradeListFields} reload={getData} isNomalTime={true} />
      <ProTable
        rowKey="id"
        columns={columns}
        dataSource={list}
        actionRef={tableRef}
        search={false}
        options={false}
        scroll={{ x: tableWidth }}
        // pagination={false}
        loading={loading}
      />
      <div className={`${styles.xxx} xxx`}></div>
    </>
  );
}
